<template>
  <div class="ListUser">
    <div class="top">
      <el-button type="primary" class="el-button" @click="add">新增</el-button>
    </div>
    <el-table
      :data="users"
      height="80%"
      line-height="20px"
      border
      style="width: 100%"
    >
      <el-table-column prop="userId" label="用户ID"> </el-table-column>
      <el-table-column prop="userName" label="姓名"> </el-table-column>
      <el-table-column prop="userNum" label="账号"> </el-table-column>
      <el-table-column prop="nickName" label="昵称"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button size="mini" @click="handleRoles(scope.$index, scope.row)"
            >编辑角色</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item
          v-show="false"
          label="用户ID"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.userId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="form.userNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
          <!-- https://blog.csdn.net/weixin_44449838/article/details/113247836 -->
          <!-- 

          value-key="roleId"===> 如果绑定的是对象，则需要这个属性 el-option
         -->
          <el-select
            v-model="form.roles"
            multiple
            collapse-tags
            style="margin-left: 20px"
            value-key="roleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in roles"
              :key="item.roleId"
              :label="item.roleName"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import { userList, userDelete, userEditRole } from "../../apis/user";
import { roleList } from "../../apis/role";
import { Message } from "element-ui";
export default {
  name: "ListUser",
  methods: {
    ...mapMutations(["setUsers"]),
    add() {
      this.$router.push("/user/index/add");
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.$router.push({
        path: "/user/index/update",
        query: row,
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
      userDelete({ userIds: [row.userId] })
        .then(() => {
          userList({})
            .then((data) => {
              let _this = this;
              _this.$store.commit("setUsers", data);
              Message({
                type: "success",
                duration: 3000,
                message: "删除成功",
              });
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {});
    },
    handleRoles(index, row) {
      roleList({})
        .then((data) => {
          let _this = this;
          _this.$store.commit("setRoles", data);
        })
        .catch(function (error) {
          console.log(error);
        });
      this.form = row;
      this.dialogFormVisible = true;
    },
    dialogFormSubmit() {
      userEditRole(this.form)
        .then(() => {
          Message({
            type: "success",
            duration: 3000,
            message: "更新成功",
          });
        })
        .catch();
      this.dialogFormVisible = false;
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        userId: null,
        userName: "",
        userNum: "",
        nickName: "",
        roles: [],
      },
      formLabelWidth: "120px",
    };
  },
  computed: {
    ...mapState(["users", "roles"]),
  },
  created() {
    userList({})
      .then((data) => {
        console.log(data);
        let _this = this;
        _this.$store.commit("setUsers", data);
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top {
  text-align: right;
}

.el-button {
  margin-bottom: 10px;
}
.ListUser {
  height: 100%;
}
.top {
  text-align: right;
}
</style>
